<template>
    <div class='confirmPay'>
        <el-dialog :title="title" visible  @close="close()" width="500px" append-to-body
                :close-on-click-modal="false">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="formLoading">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="密码" prop="pass">
                                <el-input type="password" style="width:215px;" v-model="form.pass" placeholder="请输入密码"
                                    show-password />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="close()">取 消</el-button>
                    <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>
<script>
import throttle from 'lodash.throttle'
import { quillEditor } from 'vue-quill-editor';
import { setUsersLoginPass } from "@/api/senior/user.js"
import md5 from 'js-md5'
import { isvalidatemobile } from "@/utils/validate";
export default {
    name: 'add',
    props: {
        title: String,
        userId: {
            type: String,
        }

    },
    components: {
        quillEditor
    },
    data() {
        const ismobile = (rule, value, callback) => {
            if (isvalidatemobile(value)[0]) {
                callback(new Error(isvalidatemobile(value)[1]))
            } else {
                callback()
            }
        }
        return {
            loading: false,
            formLoading: false,
            // readonly: '',
            // handleShow: "",
            form: {
                uid:this.userId
            },
            rules: {
                pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
        }
    },
    created() {
        if (this.data) {
            console.log(this.data, "表单数据")
            this.form = { ...this.form, ...this.data }
            this.form.uid = this.data.id
        }

    },
    methods: {

        close() {
            this.form = {};
            this.$emit('close');
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    this.form.pass =  this.form.pass ? md5( this.form.pass) : null
                    setUsersLoginPass(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.$emit('load')
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
    },
}

</script>
<style scoped lang='scss'>
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px !important;
    height: 100px !important;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    /* text-align: center;
    display: block !important; */
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>